<template>
  <div class="pair_container">
    <div class="img_box">
      <img src="../../assets/img/banWantAdopt.jpg" />
    </div>
    <div class="title">
      <p>我要领养</p>
    </div>
    <!-- <pet-list class="list"
              v-on:toUserId="toUserId"
              v-on:toContactName="toContactName"></pet-list> -->
    <want-adopt-list v-on:toPetId="toPetId"
                     class="list"></want-adopt-list>

    <el-dialog title="详情"
               :visible.sync="dialogVisible"
               width="30%">

      <div class="info_box">
        <el-form label-width="85px"
                 :model="petForm"
                 size="small">
          <el-form-item prop="petName"
                        label="标题:">
            <el-input v-model="petForm.petName"
                      disabled></el-input>
          </el-form-item>

          <el-form-item prop="addr"
                        label="地址:">
            <el-input v-model="petForm.addr"
                      disabled></el-input>
          </el-form-item>
          <el-form-item prop="contactName"
                        label="联系人:">
            <el-input v-model="petForm.contactName"
                      disabled></el-input>
          </el-form-item>
          <el-form-item prop="phoneNumber"
                        label="手机:">
            <el-input v-model="petForm.phoneNumber"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="详情:">
            <el-input v-model="petForm.detail"
                      type="textarea"
                      disabled
                      :rows="3"
                      class="detail"
                      placeholder="请输入详情：如养宠物经验，喜欢的宠物类型">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn_publish"
                       type="success">在线联系</el-button>
          </el-form-item>

        </el-form>
      </div>

    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible: false,
      // petForm: {
      //   petId: '1000',
      //   petName: '想领养一只狗狗',
      //   cateGoryId: 1003,
      //   addr: '四川成都',
      //   detail: '有经验',
      //   userId: '10086',
      //   contactName: '刘某人',
      //   phoneNumber: '1008611'
      // },
      petForm: {}
    };
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    toPetId (petId) {
      console.log(petId)
      this.dialogVisible = true
      this.getPetByPetId(petId)
    },
    async getPetByPetId (petId) {
      const { data: res } = await this.$http.get('/pet/getPetByPetId/' + petId)
      if (res.code == 200) {
        console.log(res.data)
        this.petForm = res.data
        return
      }
    },

  }
}
</script>
<style lang="less"
PetList scoped>
.pair_container {
  width: 100%;
  .img_box {
    width: 100%;
    margin-top: 90px;
    img {
      width: 100%;
    }
  }
  .title {
    height: 60px;
    width: 200px;
    line-height: 60px;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    background-color: violet;
    p {
      color: white;
      font-weight: bold;
      font-family: "幼圆";
    }
  }
  .list {
    margin-top: 50px;
  }
  .btn_publish {
    width: 100%;
  }
}
</style>